<template>
    <div style="padding: 20px;">
        <el-row :gutter="20">
            <el-col :span="12" :key="index" v-for="(item,index) in themeOptions" class="theme-item"
                    @click="chooseTheme(item)">
                <el-card :class="(item.type === theme ? 'color' : '') + ' cardItem'">
                    <div :style="'width: 100%;height: 50px;background:' + item.color"></div>
                    <span>{{ item.name }}</span>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import themeOptions from './themeOptions.js'
import {mapMutations, mapState} from "vuex";

export default {
    name: "theme",
    data() {
        return {
            themeOptions: themeOptions
        }
    },
    computed: {
        ...mapState(['theme'])
    },
    methods: {
        ...mapMutations(['setState']),
        chooseTheme(row) {
            let message = '请确认是否选择该主题'
            this.$confirm(message, {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning'
            }).then(() => {
                document.getElementById('app').setAttribute('class', row.type);
                this.setState({theme: row.type})
                localStorage.setItem("theme", row.type);
                this.setState({buttonColor: row.buttonColor})
                localStorage.setItem("buttonColor", row.buttonColor);
                this.$message.success('切换主题成功')
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.theme-item {
    text-align: center;
    cursor: pointer;
    margin-bottom: 10px;

    div {
        border-radius: 8px;
    }
}
</style>